.context-menu-overlay {
	pointer-events: all;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: $z-index-context-menu;
	overflow: hidden;
}

.context-menu {
	position: absolute;
	background: var(--material-toolbar);
	border: var(--material-panedivider);
	border-radius: 5px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.6);
	inset-inline-start: -9999px;
	min-width: 120px;
	padding: 5px;

	.group {
		display: flex;
		flex-direction: column;

		button.row {
			user-select: none;
			cursor: default;
			display: flex;
			align-items: center;
			text-align: center;
			white-space: nowrap;
			height: 28px;
			border-radius: 5px;
			padding-inline-start: 22px;
			width: 100%;
			padding-inline-end: 10px;

			&.checked:before {
				content: '✓';
				position: absolute;
				margin-inline-start: -17px;
				height: 28px;
				display: flex;
				align-items: center;
			}

			&:disabled {
				opacity: 0.5;
			}

			&:hover, &:focus {
				outline: none;
				box-shadow: none;
				background: var(--fill-quinary);
			}

			.icon {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-inline-end: 5px;
			}
		}

		.slider.row {
			display: flex;
			padding: 5px 10px;
			column-gap: 7px;
			width: 160px;

			&.center {
				align-items: center;
			}

			input {
				width: 0;
				flex-grow: 1;

				&:focus-visible {
					box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-search);
				}
			}

			.number {
				min-width: 30px;
				text-align: center;
			}
		}

		&:not(:last-child) {
			padding-bottom: 5px;
			box-shadow: rgb(166 145 113 / 20%) 0px 1px 0px 0px;
		}

		&:not(:first-child) {
			padding-top: 6px;
		}
	}
}
